<template>
    <div style="display:inline-block; ">
        <el-row>
            <el-col :span="12">
                <div id="main" style="width: 600px; height: 500px;">
                </div>
            </el-col>
            <el-col :span="12">
                <div id="pie" style="width: 600px; height: 500px;">
                </div>
            </el-col>
        </el-row>
    </div>

</template>
 
<script>
import * as echarts from 'echarts'


export default {
    name: "Home",
    data() {
        return {

        }
    },
    created() {
        this.load();
    },
    methods: {
        load() {
            this.request.get("/sys/data", {
                params: {}
            });
        },
    },
    mounted() {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '每日刷题统计',
                subtext: '4舍5入',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: ['25', '26', '27', '28', '29', '30', '31']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                },
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'bar'
                }
            ]
        };
        var pieDom = document.getElementById('pie');
        var pieChart = echarts.init(pieDom);
        var pieOption;
        pieOption = {
            title: {
                text: '题库数据占比',
                subtext: '4舍5入',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '占比',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Java' },
                        { value: 735, name: 'python' },
                        { value: 580, name: 'php' },
                        { value: 484, name: 'c' },
                        { value: 300, name: '前端' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
        pieChart.setOption(pieOption)

    }
};
</script>
<style>

</style>